<template>
  <el-dialog :visible.sync="currentShowFlag" append-to-body fullscreen :close-on-click-modal="false" :close-on-press-escape="false" @open="handleDialogOpen" @closed="handleDialogClosed">
    <div slot="title" class="detail-dialog__header">{{$t('debt_balance.detailDialog')}}</div>
    <div>
      <simple-form ref="form" v-model="formModel" label-width="80px" labelPosition="top" :form-field="formField" :grid="{xs: 12, sm: 12, md: 8}" :view-flag="viewFlag"></simple-form>
    </div>
    <div slot="footer">
      <el-button @click="handleDialogClose">{{viewFlag ? $t('operation.close') : $t('operation.cancel')}}</el-button>
      <el-button type="primary" @click="handleDataSubmit" v-if="!viewFlag">{{$t('operation.submit')}}</el-button>
    </div>
  </el-dialog>
</template>
<script>
const BASEURL = {
  save: '/api/business/balancesheet/demoBalanceSheet/save',
  update: '/api/business/balancesheet/demoBalanceSheet/update',
  get: '/api/business/balancesheet/demoBalanceSheet/get',
  office: '/api/system/office/list'
}
export default {
  name: 'debt_balance_detail',
  data () {
    return {
      formModel: { accountPeriod: '2019', quarter: '1' },

      companyList: [],
      companyLoadingFlag: false
    }
  },
  inject: ['handleDataSearch'],
  computed: {
    currentShowFlag: {
      get () { return this.showFlag },
      set (val) { this.$emit('update:showFlag', val) }
    },

    quarter () { return this.$getDictList('quarter') },

    formField () {
      return [{
        prop: 'accountPeriod',
        label: this.$t('debt_balance.accountPeriod'),
        type: 'Datepicker',
        component: { type: 'year', valueFormat: 'yyyy' },
        rules: { trigger: 'blur', message: this.$t('validate.notBlank'), required: true }
      },
      {
        prop: 'quarter',
        label: this.$t('debt_balance.quarter'),
        type: 'Select',
        component: { optionList: this.quarter },
        rules: { trigger: 'blur', message: this.$t('validate.notBlank'), required: true }
      },
      {
        prop: 'company',
        label: this.$t('debt_balance.company'),
        type: 'SearchableInput',
        component: {
          remoteMethod: this.getCompanyList,
          loading: this.companyLoadingFlag,
          optionList: this.companyList,
          valueKey: 'id'
        },
        event: {
          focus: () => {
            this.getCompanyList()
          }
        },
        rules: {
          type: 'object',
          trigger: 'change',
          message: this.$t('validate.notSelect'),
          required: true,
          fields: {
            id: { type: 'string', message: this.$t('validate.notSelect'), required: true }
          }
        }
      },
      {
        prop: 'totalAmount',
        label: this.$t('debt_balance.totalAmount'),
        type: 'NumberInput',
        component: { min: 0, decimal: 4 },
        rules: { trigger: 'blur', message: this.$t('validate.notBlank'), required: true }
      },
      {
        prop: 'receivableAmount',
        label: this.$t('debt_balance.receivableAmount'),
        type: 'NumberInput',
        component: { min: 0, decimal: 4 },
        rules: { trigger: 'blur', message: this.$t('validate.notBlank'), required: true }
      },
      {
        prop: 'occupyAmount',
        label: this.$t('debt_balance.occupyAmount'),
        type: 'NumberInput',
        component: { min: 0, decimal: 4 },
        rules: { trigger: 'blur', message: this.$t('validate.notBlank'), required: true }
      },
      {
        prop: 'liabilityAmount',
        label: this.$t('debt_balance.liabilityAmount'),
        type: 'NumberInput',
        component: { min: 0, decimal: 4 },
        rules: { trigger: 'blur', message: this.$t('validate.notBlank'), required: true }
      },
      {
        prop: 'payAmount',
        label: this.$t('debt_balance.payAmount'),
        type: 'NumberInput',
        component: { min: 0, decimal: 4 },
        rules: { trigger: 'blur', message: this.$t('validate.notBlank'), required: true }
      },
      {
        prop: 'netAssetsAmount',
        label: this.$t('debt_balance.netAssetsAmount'),
        type: 'NumberInput',
        component: { min: 0, decimal: 4 },
        rules: { trigger: 'blur', message: this.$t('validate.notBlank'), required: true }
      },
      {
        prop: 'debtRatio',
        component: { min: 0, decimal: 4 },
        label: this.$t('debt_balance.debtRatio'),
        type: 'NumberInput',
        rules: { trigger: 'blur', message: this.$t('validate.notBlank'), required: true }
      }]
    }
  },
  props: {
    showFlag: { type: Boolean, default: false },
    viewFlag: { type: Boolean },
    detailData: { type: Object }
  },
  methods: {
    handleDialogClose () {
      this.currentShowFlag = false
    },

    getCompanyList (name) {
      this.companyLoadingFlag = true
      let params = { parent: { id: this.$store.state.app.userInfo.company.id }, category: 'sys_office_category_3', type: 'sys_office_type_3' }
      this.$axios.post(BASEURL.office, params)
        .then(resp => {
          let respData = resp.data
          this.companyList = respData.list.map(item => { return { key: item.id, value: item, label: item.name } })
        })
        .finally(() => { this.companyLoadingFlag = false })
    },

    initialSelectOptionList (company) {
      this.companyList = [{ key: company.id, value: company, label: company.name }]
    },

    handleDataSubmit () {
      this.$refs.form.$refs.simpleForm.validate(status => {
        if (status) {
          let loadingFlag = this.$loading({ target: this.$el.querySelector('.el-dialog') })
          let submitModel = this.$_.cloneDeep(this.formModel)

          if (this.detailData.id) {
            this.$axios
              .post(BASEURL.update, submitModel)
              .then(resp => {
                this.currentShowFlag = false
                this.$message({ type: 'success', message: this.$t('tip.saveSuccess') })
                this.handleDataSearch()
              })
              .finally(() => {
                loadingFlag.close()
              })
          } else {
            this.$axios
              .post(BASEURL.save, submitModel)
              .then(resp => {
                this.currentShowFlag = false
                this.$message({ type: 'success', message: this.$t('tip.saveSuccess') })
                this.handleDataSearch()
              })
              .finally(() => {
                loadingFlag.close()
              })
          }
        }
      })
    },

    handleDialogOpen () {
      if (!this.detailData.id) { return }
      let loadingFlag = this.$loading({ target: this.$el.querySelector('.el-dialog') })

      this.$axios
        .post(BASEURL.get, { id: this.detailData.id })
        .then(resp => {
          let respData = resp.data
          this.formModel = respData
          this.initialSelectOptionList(respData.company)
        })
        .finally(() => {
          loadingFlag.close()
        })
    },

    handleDialogClosed () {
      this.$refs.form.resetFields()
      this.formModel = { accountPeriod: '2019', quarter: '1' }
    }
  }
}
</script>
